<template>
	<view class="success_box">
		<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-04.png" class="success_icon"></image>
		<view class="success_title">订单已支付成功</view>
		<view class="success_text">支付金额：¥{{orderInfo.payAmount}}</view>
		<view class="success_text">请耐心等待陪宠师接单</view>
		<view class="success_button button_red" @tap="toOrderDetail">查看订单</view>
		<view class="success_button button_white" @tap="toHome">返回工作室首页</view>
	</view>
	<!-- <view class="xjs-size-26 xjs-text-center subcribTips" @click="getSubcrib">订阅消息通知</view> -->
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import api from '@/api';
	import { messageSubcrib } from '@/hooks/useMessageSubscrib'
	const orderId = ref()
	const orderInfo = ref({})
	
	onLoad((data) => {
		orderId.value = data.orderId
		getOrderInfo()
	})
	const getSubcrib = ()=>{
		messageSubcrib('subscrib_02')
	}
	const getOrderInfo = async () => {
		const {data} = await api({
			method: 'get',
			url: `/mall/order/detail/${orderId.value}`,
		});
		orderInfo.value = data
	}
	const toOrderDetail = () => {
		uni.navigateTo({
			url: `/pages/petsOrder/petsList/index?orderType=-1&orderStatus=-1`
		})
	}
	const toHome = () => {
		uni.switchTab({
			url: '/pages/home/index'
		})
	}
</script>

<style lang="scss" scoped>
	.success_box {
		width: 100%;
		height: 100%;
		background: #F9F6F6;
		padding: 0 48rpx;
		box-sizing: border-box;
		
		.success_icon {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			display: flex;
			margin: 0 auto;
			margin-top: 122rpx;
			margin-bottom: 40rpx;
		}
		.success_title {
			font-size: 40rpx;
			color: #1B2120;
			font-weight: bold;
			margin-bottom: 32rpx;
			text-align: center;
		}
		.success_text {
			font-size: 30rpx;
			color: #5C5E5E;
			margin-bottom: 32rpx;
			text-align: center;
		}
		.success_button:last-child {
			margin-top: 0;
		}
		.success_button {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			font-size: 28rpx;
			margin-bottom: 32rpx;
			margin-top: 102rpx;
		}
		.button_red {
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
			color: #FFFFFF
		}
		.button_white {
			background: #FFFFFF;
			border: 2rpx solid #FF6084;
			color: #FF6084;
		}
	}
</style>